import React from 'react';
import './Navigation.css';

const navItems = [
  { id: 'practices', label: 'Breaks', icon: '☀️' },
  { id: 'content', label: 'Focus', icon: '📚' },
  { id: 'news', label: 'News', icon: '📰' },
  { id: 'reminders', label: 'Dynamics', icon: '📊' },
  { id: 'history', label: 'Analytics', icon: '📈' },
  { id: 'settings', label: 'Profile', icon: '⚙️' }
];

export const Navigation = ({ currentTab, onTabChange }) => {
  return (
    <nav className="bottom-nav">
      {navItems.map((item) => (
        <button
          key={item.id}
          className={`nav-item ${currentTab === item.id ? 'active' : ''}`}
          onClick={() => onTabChange(item.id)}
          title={item.label}
        >
          <span className="nav-icon">{item.icon}</span>
          <span className="nav-label">{item.label}</span>
        </button>
      ))}
    </nav>
  );
};

